<template>
  <div id="HomePage" v-if="dataList">
    <!-- <button @click="logout">退出登录</button> -->
    <!-- 轮播图 -->
    <swiper id="swiper" :modules="modules" :slides-per-view="1" :space-between="0" navigation lazy loop autoplay
      :pagination="{
        clickable: true
      }">
      <swiper-slide class="banner-swiper" v-for="(item, index) in dataList.titleList" :key="index">
        <img class="" :src="item.url" alt="轮播图" />
        <div class="swiper-slide-title">
          <h1>{{ item.name }}</h1>
          <!-- <p>{{ item.content }}</p> -->
        </div>
      </swiper-slide>
    </swiper>

    <!-- 大数据管理系统 -->
    <div id="bigData" class="container-fuild">
      <div class="row bigData-container">
        <div class="col-xs-12 col-sm-12 col-md-6">
          <img class="img-responsive wow slideInLeft" data-wow-delay="1s" :src="dataList.contentImg" alt="大数据管理系统" />
        </div>
        <div class="col-xs-12 col-sm-12 col-md-6 wow slideInRight" data-wow-delay="0.5s">
          <h2 class="bigData-title">
            {{ dataList.contentTitle }}
            <small>/ {{ dataList.contentTitleEn }}</small>
          </h2>
          <p>
            {{ dataList.content }}
          </p>
        </div>
      </div>
    </div>




    <!-- 为什么选择我们 -->
    <div id="whyChooseUs" class="conatiner-fuild">
      <div class="container">
        <div class="whyChooseUs-title text-center">
          <p class="wow slideInRight" data-wow-delay="0.5s">{{ dataList.footTitle }}</p>
          <p class="wow slideInRight" data-wow-delay="0.5s">{{ dataList.footTitleEn }}</p>
        </div>
        <div class="row">
          <div class="col-xs-12 col-sm-6 col-md-3 server-wrapper" v-for="(item, index) in dataList.footList"
            :key="index">
            <div class="server-block  wow slideInUp">
              <img class="center-block" :src="item.url" alt="logo" />
              <p class="text-center">{{ item.name }}</p>
              <div class="text-center" v-html="item.content">
              </div>
              <div class="background">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="HomePage">
import WOW from 'wow.js'
import { getCurrentInstance, onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
// import Swiper from 'swiper'
import { Navigation, Pagination, Scrollbar, A11y, Lazy, Autoplay } from 'swiper'
import { Swiper, SwiperSlide } from 'swiper/vue'
import axios from '../utils/axios';
import 'swiper/css'
import 'swiper/css/navigation'
import 'swiper/css/pagination'
import 'swiper/css/scrollbar'
import 'swiper/css/lazy'
import 'swiper/css/autoplay'

import banner1 from '@/assets/img/chip.jpg'
import banner2 from '@/assets/img/network.jpg'
import banner3 from '@/assets/img/robotX.jpg'
// import gmd1 from '@/assets/img/BoneDensitometer.jpg'


import img_tel from '@/assets/img/tel.png'
import img_computer from '@/assets/img/computer.png'
import img_hospital from '@/assets/img/hospital.png'
import img_skill from '@/assets/img/skill.png'
const router = useRouter()
// title: '鼎盛远程超声机器人',
// content: '自研核心技术'
// title: '打破了空间的限制',
// content: '让医疗诊断不再受距离束缚'
// title: '打破了空间的限制',
// content: '您身边的远程超声专家'
const swiperList = [
  {
    img: banner1,
    title: '开启医疗全新篇章',
  },
  {
    img: banner2,
    title: '突破空间限制',
  },
  {
    img: banner3,
    title: '您身边的远程超声专家',
  }
]

const modules = [Navigation, Pagination, Scrollbar, A11y, Lazy, Autoplay]


const serverList = [
  {
    logo: img_tel,
    title: '基层医院',
    content: '<p>大城市医疗资源</p>也能服务基层医院'
  },
  {
    logo: img_computer,
    title: '隔离病房',
    content: '<p>在传染病流行时期</p>使医生隔绝感染分险'
  },
  {
    logo: img_hospital,
    title: '野战医院',
    content: '<p>在战争时期使全国各地</p>医生快速诊疗战士'
  },
  {
    logo: img_skill,
    title: '海岛/边疆/远洋/太空',
    content: '<p>在人迹罕见地区均可</p>快速响应对病患的操作诊疗'
  }
]

const dataList = ref(null);


const checkLoginStatus = () => {
  const expiry = localStorage.getItem('login_expiry');
  if (!expiry || Date.now() > Number(expiry)) {
    localStorage.removeItem('login_expiry');
    router.push('/login');
    alert('登录过期，请重新登录');
  }
};

const logout = () => {
  localStorage.removeItem('login_expiry');
  router.push('/login');
};


const getDataList = async (val) => {
  const res = await axios.get('/gwht/gw/index/getInfo');
  // console.log(res, 'res==');
  dataList.value = res.data;
  // console.log(dataList.value.titleList, '===');
}



const { proxy } = getCurrentInstance() //获取上下文实例，ctx=vue2的this
onMounted(() => {
  // checkLoginStatus(); // 先检查登录状态
  getDataList();

  // console.log('mounted', proxy)
  // console.log(proxy.$wow, '------')
  /* 初始化 WOW.js 动画 */
  new WOW({
    boxClass: 'wow',
    animateClass: 'animated',
    offset: 100,
    mobile: true,
    live: true
  }).init()
})
</script>

<style scoped>
/* 整体盒子 */
#HomePage {
  width: 100%;
}

/* 顶部轮播图 */
#swiper {
  width: 100%;
  /* height: 600px; */
  height: 800px;
}

#swiper .banner-swiper {
  width: 100%;
  height: 100%;
  position: relative;
}

#swiper .banner-swiper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#swiper .banner-swiper .swiper-slide-title {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999999999;
  width: 100%;
  height: 100%;
  color: #fff;
  background: rgba(51, 51, 51, 0.534);
  text-align: center;
  line-height: 80px;
  /* display: flex; */
  /* justify-content: center; */
}

#swiper .banner-swiper .swiper-slide-title>h1 {
  font-size: 3.125rem;
  /* margin-top: 13%; */
  margin-top: 20%;

}

#swiper .banner-swiper .swiper-slide-title>p {
  font-size: 20px;
  margin-top: 1%;
  font-weight: 700;
}

/* 大数据管理系统 */
#bigData {
  padding: 100px;
  transition: all ease 0.6s;
  box-sizing: border-box;
}

#bigData .bigData-title {
  padding-bottom: 10px;
  border-bottom: 1px solid #ccc;
}

#bigData small {
  font-size: 16px;
}

#bigData p {
  font-size: 16px;
  color: #333;
  line-height: 3rem;
  text-indent: 2em;
  /* padding-bottom: 15px; */
  /* position: relative; */
  /* padding-top: 10px; */
}

#bigData .bigData-device {
  margin: 50px 0 20px;
}

/* 您身边的IT专家 */
#contactUs {
  color: #fff;
  height: 400px;
  background: url('../assets/img/contact_us_bg.jpg') 0 0 no-repeat;
  background-size: 100% 100%;
  transition: all ease 0.6s;
}

#contactUs .contactUs-container {
  padding-top: 50px;
}

#contactUs .contactUs-container button {
  width: 300px;
  height: 50px;
  margin-top: 40px;
}

#contactUs .contactUs-container .contactUs-contactWay span {
  display: inline-block;
  width: 48px;
  height: 48px;
  margin: 30px;
}

#contactUs .contactUs-container .contactUs-contactWay span:nth-of-type(1) {
  background: url('../assets/img/weixin.png') 0 0 no-repeat;
  background-size: 100% 100%;
}

#contactUs .contactUs-container .contactUs-contactWay span:nth-of-type(2) {
  background: url('../assets/img/weibo.png') 0 0 no-repeat;
  background-size: 100% 100%;
}

#contactUs .contactUs-container .contactUs-contactWay span:nth-of-type(3) {
  background: url('../assets/img/twitter.png') 0 0 no-repeat;
  background-size: 100% 100%;
}

/* 客户评价 */
#customer {
  padding: 50px 0;
  box-sizing: border-box;
  background: #efefef;
  transition: all ease 0.6s;
}

#customer .customer-title {
  font-size: 30px;
  color: rgb(102, 102, 102);
  margin: 0 0 30px;
}

#customer .customer-block {
  background: #fff;
  padding: 30px 80px;
}

#customer .customer-logo img {
  width: 94px;
  height: 94px;
  border: 1px solid #ccc;
}

#customer .customer-yh img {
  width: 34px;
  height: 34px;
}

#customer .customer-content1 {
  padding-bottom: 20px;
  border-bottom: 1px solid #0ce9f1;
}

#customer .customer-content2 {
  padding-top: 20px;
}

/* 为什么选择我们 */
#whyChooseUs {
  padding: 100px;
  background: url('../assets/img/homecjbg.jpg');
}

#whyChooseUs .whyChooseUs-title {
  margin-bottom: 50px;
}

#whyChooseUs .whyChooseUs-title p:nth-of-type(1) {
  font-size: 30px;
  font-weight: 500;
}

#whyChooseUs .whyChooseUs-title p:nth-of-type(2) {
  font-size: 14px;
}

#whyChooseUs .server-block {
  padding: 50px 20px;
  border: 1px solid #ccc;
  border-bottom: 5px solid #ccc;
  z-index: 3;
  position: relative;
}


#whyChooseUs .server-block img {
  width: 48px;
  height: 48px;
}

#whyChooseUs .server-block>p {
  font-size: 19px;
  margin: 30px 0;
  color: #333;
}

#whyChooseUs .server-block>div {
  color: #333;
}

#whyChooseUs .server-block .text-center {
  color: #333;
  word-wrap: break-word;
}

#whyChooseUs .server-block:hover {

  border: 1px solid #28f;
  border-bottom: 5px solid #28f;
  transform: rotateY('180deg')
}

#whyChooseUs .server-block:hover .text-center {

  color: #fff !important;
  z-index: 9999;
}

#whyChooseUs .server-wrapper:hover {
  color: #fff !important;
  z-index: 9999;

}

#whyChooseUs .server-wrapper {
  position: relative;
  background-color: transparent !important;
}

#whyChooseUs .server-wrapper .background {
  position: absolute;
  width: 100%;
  height: 0%;
  top: 100%;
  left: 0px;
  background: #2dadd5;
  z-index: -3;

}

#whyChooseUs .server-wrapper:hover .background {
  height: 100%;
  top: 0;
  transition: all .4s;

}

/* 媒体查询（手机） */
@media screen and (max-width: 768px) {
  #swiper {
    height: 200px;
  }

  #bigData {
    padding: 30px;
  }

  #bigData .bigData-title {
    font-size: 20px;
  }

  #bigData .bigData-device {
    font-size: 20px;
    margin: 10px 0 10px;
  }

  #contactUs {
    height: 200px;
    transition: all ease 0.6s;
  }

  #contactUs .contactUs-container {
    padding-top: 0;
  }

  #contactUs .contactUs-container h1 {
    font-size: 25px;
  }

  #contactUs .contactUs-container h3 {
    font-size: 18px;
  }

  #contactUs .contactUs-container button {
    width: 200px;
    height: 30px;
    margin-top: 20px;
  }

  #contactUs .contactUs-container .contactUs-contactWay span {
    display: inline-block;
    width: 28px;
    height: 28px;
    margin: 10px;
  }

  #customer {
    padding: 30px 0;
    box-sizing: border-box;
    background: #fff;
  }

  #customer .customer-title {
    font-size: 16px;
    font-weight: bold;
  }

  #customer .customer-logo img {
    width: 48px;
    height: 48px;
  }

  #customer .customer-block {
    padding: 30px;
  }

  #customer .customer-block>div {
    padding: 30px 0;
  }

  #whyChooseUs {
    padding: 20px 0;
    transition: all ease 0.6s;
  }

  #whyChooseUs .whyChooseUs-title p:nth-of-type(1) {
    font-size: 20px;
    font-weight: 700;
  }

  #whyChooseUs .whyChooseUs-title p:nth-of-type(2) {
    font-size: 12px;
  }

  #whyChooseUs .server-block {
    padding: 50px 0;
    border: 1px solid #ccc;
    border-bottom: 5px solid #ccc;
  }

  #whyChooseUs .server-block img {
    width: 48px;
    height: 48px;
  }

  #whyChooseUs .server-block>p {
    font-size: 20px;
    margin: 30px 0;
  }

  #whyChooseUs .server-block>div {
    color: #ccc;
  }
}

/* 媒体查询（平板） */
@media screen and (min-width: 768px) and (max-width: 996px) {
  #swiper {
    height: 400px;
  }

  #bigData {
    padding: 60px;
  }

  #bigData .bigData-title {
    font-size: 30px;
  }

  #bigData .bigData-device {
    font-size: 30px;
    margin: 30px 0 15px;
  }

  #contactUs {
    height: 300px;
  }

  #contactUs .contactUs-container {
    padding-top: 50px;
  }

  #contactUs .contactUs-container h1 {
    font-size: 30px;
  }

  #contactUs .contactUs-container h3 {
    font-size: 20px;
  }

  #contactUs .contactUs-container button {
    width: 300px;
    height: 50px;
    margin-top: 30px;
  }

  #contactUs .contactUs-container .contactUs-contactWay span {
    display: inline-block;
    width: 32px;
    height: 32px;
    margin: 15px;
  }

  #customer .customer-title {
    font-size: 24px;
  }

  #whyChooseUs {
    padding: 20px 0;
  }
}
</style>
